
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/duanxin" style="color: #409eff;">短信中心</router-link>>
            统计
          </div>
          <div class="hei10"></div>
        <div class="conlist" v-loading='loading'>
          <div class="list listth flex">
            <div class="th">日期</div>
            <div class="th">发送数量</div>
            <div class="th">成功数量</div>
            <div class="th">失败数量</div>
          </div>
          <div class="list listtd flex" v-for="item in list" :key="item.id">

            <div class="td">{{item.time}}</div>
             <div class="td">{{item.total}}</div>
              <div class="td">{{item.success}}</div>
               <div class="td">{{item.fail}}</div>

          </div>
        </div>
      </div>
    </div>

    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
    },
    name: "duanxintongji",
    data() {
      return {
        total: 0,
        pagesize: 20,
        page: 1,
        list: "",
        loading: true,
        classs: "",
        name: "",
        status: "",
        time: "",
        mobile: "",
        start: "",
        end: "",
        form: ""
      }
    },
    created() {

      this.getlist()
    },
    mounted() {

    },
    methods: {
      timechange: function() {
        this.start = this.time[0]
        this.end = this.time[1]
      },
      search: function() {
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        var that = this
        axios.get('/api/plan-market/message/statistics?id='+this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .duanxintongji {

        .title {
          border-bottom: 1px #EAEAEA solid;
          line-height: 45px;
          padding-left: 30px;
          font-size: 16px;
          background: #F9F9F9;
          color: #727272
        }
      }

      .powertop {
        display: flex;
        background:#f9f9f9;
      }

      .powertopli {
        flex-basis: 160px;
        line-height: 45px;
        border-top: 4px #F9F9F9 solid;
        color: #727272;
        border-right: 1px #F9F9F9 solid;
        font-size: 14px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-top: 4px #DD2727 solid;
      }

      .conlist {
        padding-bottom: 20px;
        background: #FFFFFF;
        min-height: 800px;

        .flex {
          display: flex;
          flex-wrap: wrap;
        }

        .flexbt {
          justify-content: space-between;
        }

        .renguantop {
          padding: 20px;
          padding-bottom: 10px;
          border-bottom: 1px #EAEAEA solid;

          .jiediand {
            font-size: 16px;
            line-height: 30px;
            margin-right: 20px;
          }

          .jiedianx {
            font-size: 14px;
            color: #F1A533;
            line-height: 35px;
          }

          .duanxinn {
            color: #B8B8B8;
            line-height: 35px;
            margin-right: 10px;
          }

          .duanxinu {
            color: #DF3434;
            line-height: 35px;
            margin-right: 10px;
          }

          .duanxinb {
            background: #EEF7FF;
            line-height: 35px;
            color: #FFFFFF;
            padding: 0 10px;
            border-radius: 3px;
          }
        }

        .xinjianrenwu {
          padding: 20px;
        }

        .list {
          text-align: center;
          line-height: 50px;

          .th {
            flex: 1;
            background: #EAEAEA;
            font-weight: bold;
          }

          .td {
            flex: 1;
            border-bottom: 1px #EAEAEA solid;
            height: 50px;
            overflow: hidden;
            font-size: 14px;
          }
        }

  }
</style>
